<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>页面布局</title>
	<meta 
		name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" 
	>
	@media screen and (min-width: 414px) and (max-width: 639px) {
	    body{font-size: 17px;}
	}
	<style type="text/css">
		html *{
			margin:0;
			padding: 0;
		}
		.layout article div{
			min-height: 100px;
		}
		.layout{
			margin-bottom: 50px;
		}
	</style>
</head>
<body>
	<!-- 浮动布局 -->
	<section class="layout float">
		<style type="text/css">
			.layout.float .left{
				float:left;
				width: 300px;
				background-color: red;
			}
			.layout.float .right{
				float: right;
				width: 300px;
				background-color:blue;
			}
			.layout.float .center{
				background-color: yellow;
				/*overflow: hidden;*/
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div> 
			<div class="right"></div>
			<div class="center">
				<h1>浮动解决方案</h1>
				<p>1.这是三栏布局中间部分</p>
				<p>2.这是三栏布局中间部分</p>	
				<p>3.这是三栏布局中间部分</p>	
				<p>4.这是三栏布局中间部分</p>	
				<p>5.这是三栏布局中间部分</p>	
				<p>6.这是三栏布局中间部分</p>	
			</div>
		</article>
	</section> 	

	<!-- 绝对定位布局 -->
	<section class="layout position">
		<style type="text/css">
			.layout.position .left-center-right > div{
				position: absolute;
			}
			.layout.position .left{
				left:0;
				width: 300px;
				background-color:red;
			}
			.layout.position .right{
				right: 0;
				width: 300px;
				background-color:blue;
			}
			.layout.position .center{
				background-color: yellow;
				left:300px;
				right: 300px;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h1>绝对定位解决方案</h1>
				<p>1.这是三栏布局中间部分</p>
				<p>2.这是三栏布局中间部分</p>	
				<p>3.这是三栏布局中间部分</p>	
				<p>4.这是三栏布局中间部分</p>	
				<p>5.这是三栏布局中间部分</p>	
				<p>6.这是三栏布局中间部分</p>
			</div>
			<div class="right"></div>
		</article>
	</section>

	<!-- flexbox布局 -->
	<section class="layout flexbox">
		<style type="text/css">
			.layout.flexbox{
				margin-top: 300px;
			}
			.layout.flexbox .left-center-right{
				display: flex;
			}
			.layout.flexbox .left{
				width: 300px;
				background-color: red;
			}
			.layout.flexbox .right{
				width: 300px;
				background-color: blue;
			}
			.layout.flexbox .center{
				flex:1;
				background-color: yellow;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h1>flexbox解决方案</h1>
				<p>1.这是三栏布局中间部分</p>
				<p>2.这是三栏布局中间部分</p>	
				<p>3.这是三栏布局中间部分</p>	
				<p>4.这是三栏布局中间部分</p>	
				<p>5.这是三栏布局中间部分</p>	
				<p>6.这是三栏布局中间部分</p>
			</div>
			<div class="right"></div>
		</article>
	</section>

	<!-- tab布局 -->
	<section class="layout table">
		<style type="text/css">
			.layout.table .left-center-right{
				display: table;
				width: 100%;
				height:100px;
			}
			.layout.table .left-center-right>div{
				display: table-cell;
			}
			.layout.table .left{
				width: 300px;
				background-color: red;
			}
			.layout.table .right{
				width: 300px;
				background-color: blue;
			}
			.layout.table .center{
				background-color: yellow;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h1>table解决方案</h1>
				<p>1.这是三栏布局中间部分</p>
				<p>2.这是三栏布局中间部分</p>	
				<p>3.这是三栏布局中间部分</p>	
				<p>4.这是三栏布局中间部分</p>	
				<p>5.这是三栏布局中间部分</p>	
				<p>6.这是三栏布局中间部分</p>
			</div>
			<div class="right"></div>
		</article>
	</section>

	<!-- grid布局 -->
	<section class="layout grid">
		<style type="text/css">
			.layout.grid .left-center-right{
				display: grid;
				/*grid-template-rows: 100px;*/
				grid-template-columns: 300px auto 300px;
				/*width: 100%;*/
			}
			.layout.grid .left{

				background-color: red;

			}
			.layout.grid .center{
				background-color: yellow;
			}
			.layout.grid .right{
				background-color: blue;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h1>grid解决方案</h1>
				<p>1.这是三栏布局中间部分</p>
				<p>2.这是三栏布局中间部分</p>	
				<p>3.这是三栏布局中间部分</p>	
				<p>4.这是三栏布局中间部分</p>	
				<p>5.这是三栏布局中间部分</p>	
				<p>6.这是三栏布局中间部分</p>
			</div>
			<div class="right"></div>
		</article>
	</section>

	<!-- 上下高度固定,中间自适应 -->
	<section class="layout up-middle-down">
		<style type="text/css">
			.layout.up-middle-down article{
				height:80px;
				display: flex;
				flex-flow:column;
				justify-content: space-between;
				/*align-items:space-between;*/
			}
			.layout .up{
				background-color: red;
				height:20px;
			}
			.layout .down{
				background-color: blue;
				height:20px;
			}
			.layout .middle{
				flex:1;
				background-color:yellow;
			}
		</style>
		<article class="up-middle-down">
			<div class="up"></div>
			<div class="middle">
				<p>flexbox方案上下固定,中间自适应</p>
			</div>
			<div class="down"></div>
		</article>
	</section>


</body>
</html>